Node / mirrors / respira / files / src / App.tsx

Displaying Raw • Download

import { useEffect } from "react";

import { useShallow } from "zustand/react/shallow";

import { useMachineStore } from "./stores/useMachineStore";

import { usePatternStore } from "./stores/usePatternStore";

import { useUIStore } from "./stores/useUIStore";

import { AppHeader } from "./components/AppHeader";

import { LeftSidebar } from "./components/LeftSidebar";

import { PatternCanvas } from "./components/PatternCanvas";

import { PatternCanvasPlaceholder } from "./components/PatternCanvasPlaceholder";

import { BluetoothDevicePicker } from "./components/BluetoothDevicePicker";

import "./App.css";

function App() {

// Set page title with version

useEffect(() => {

document.title = \\`Respira v${__APP_VERSION__}\\`;

}, []);

// Machine store - for auto-loading cached pattern

const { resumedPattern, resumeFileName } = useMachineStore(

useShallow((state) => ({

resumedPattern: state.resumedPattern,

resumeFileName: state.resumeFileName,

})),

);

// Pattern store - for auto-loading cached pattern

const { pesData, setPattern, setPatternOffset } = usePatternStore(

useShallow((state) => ({

pesData: state.pesData,

setPattern: state.setPattern,

setPatternOffset: state.setPatternOffset,

})),

);

// UI store - for Pyodide initialization

const { initializePyodide } = useUIStore(

useShallow((state) => ({

initializePyodide: state.initializePyodide,

})),

);

// Initialize Pyodide in background on mount (non-blocking thanks to worker)

useEffect(() => {

initializePyodide();

}, [initializePyodide]);

// Auto-load cached pattern when available

useEffect(() => {

if (resumedPattern && !pesData) {

console.log(

"[App] Loading resumed pattern:",

resumeFileName,

"Offset:",

resumedPattern.patternOffset,

);

setPattern(resumedPattern.pesData, resumeFileName || "");

// Restore the cached pattern offset

if (resumedPattern.patternOffset) {

setPatternOffset(

resumedPattern.patternOffset.x,

resumedPattern.patternOffset.y,

);

}

}

}, [resumedPattern, resumeFileName, pesData, setPattern, setPatternOffset]);

return (

<div className="h-screen flex flex-col bg-gray-100 dark:bg-gray-900 overflow-hidden">

<AppHeader />

<div className="flex-1 p-4 sm:p-5 lg:p-6 w-full overflow-y-auto lg:overflow-hidden flex flex-col">

<div className="flex-1 grid grid-cols-1 lg:grid-cols-[480px_1fr] gap-4 md:gap-5 lg:gap-6 lg:overflow-hidden">

{/* Left Column - Controls */}

<LeftSidebar />

{/* Right Column - Pattern Preview */}

<div className="flex flex-col lg:overflow-hidden lg:h-full">

{pesData ? <PatternCanvas /> : <PatternCanvasPlaceholder />}

</div>

</div>

{/* Bluetooth Device Picker (Electron only) */}

<BluetoothDevicePicker />

</div>

</div>

);

}

export default App;